<template>
  <div class="personl">
   <div class="personl-content">
    <div class="header">
  <div class="header-content">
    <van-icon name="arrow-left" color="#fff" size="26" @click="$router.go(-1)"/>
  <div class="right-icon"><van-icon class="right-icon-item" name="share-o"  color="#fff" size="26"/>
    <van-icon name="setting-o"  class="right-icon-item"  color="#fff" size="26"/></div>
  </div>
   </div>
   <div class="personl-detail">
    <van-image
  round
  class="personl-img"
  width="3rem"
  height="3rem"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
 <span class="meet">我们相遇0天啦~</span>
 <div class="personl-num">
  <span class="personl-id"> 121212121</span>
  <span class="growth-value">成长值 0> </span>
 </div>
 <p class="belong-place"><span>广东</span></p>
 <ul class="list">
   <li><i>{{ count.length }}</i><span>关注</span></li>
   <li><i>0</i><span>粉丝</span></li>
   <li><i>0</i><span>获赞</span></li>
   <li><i>0</i><span>问答</span></li>
 </ul>
   </div>
   <van-tabs class="tab" title-active-color="#ff5934"  line-width="1.2rem" color="#ff5934">
  <van-tab title="动态" >
    <div class="kong">
      <van-image
      class="kong-img"
     :src="kong"
    />
   <div class="no-commit">暂时没有动态~</div>
    </div>
  </van-tab>
  <van-tab title="赞过">
    <div class="kong" v-if="list.length===0">
      <van-image
      class="kong-img"
     :src="kong"
    />
   <div class="no-commit">暂时没有点赞~</div>
    </div>
    <div class="up" v-else>
      <div v-for="item in list" class="up-item">
      <ArticleItem 
        v-if="item.content_type===3"
        :id="item.id"
        :nickname="item.nickname"
        :icon="item.icon"
        :content_type="item.content_type"
        :title="item.title"
        :content="item?.content"
        :pic_list="item?.pic_list"
        :video_list="item?.video_list"
        :tag_list="item?.tag_list"
        :hot_comment="item?.hot_comment"
        :comment_num="item?.comment_num"
        :praise_num="item?.praise_num"
        />
        <!--问题 -->
        <QuestionItem  
        v-else-if="item.content_type===6"
        :q_id="item.question.q_id"
        :content_type="item.content_type"
        :question="item.question"
        :answer_num="item.question.answer_num"
        :praise_num="item.praise_num"
        :tag_list="item.tag_list"
        :answer_list_v2="item.question.answer_list_v2"
       
        />
        <!-- 100 detail买家秀  1article 内容详情 -->
       <DetailItem v-else-if="item.content_type===1||item.content_type===100"
        :id="item.id"
        :nickname="item.nickname"
        :icon="item.icon"
        :content_type="item.content_type"
        :content="item.content"
        :pic_list="item.pic_list"
        :tag_list="item.tag_list"
        :hot_comment="item?.hot_comment"
        :comment_num="item.comment_num"
        :praise_num="item.praise_num"
   
       />
       <!-- 投票 -->
        <VoteItem v-else-if="item.content_type===5"
        :id="item.id"
        :nickname="item.nickname"
        :icon="item.icon"
        :content_type="item.content_type"
        :content="item.content"
        :hot_comment="item?.hot_comment"
        :comment_num="item.comment_num"
        :praise_num="item.praise_num"
        :title="item.title"
        :vote_detail="item.vote_detail"

        />
        <!-- 测评 -->
        <TestItem
        v-else-if="item.content_type===99"
        :id="item.id"
        :nickname="item.nickname"
        :icon="item.icon"
        :content_type="item.content_type"
        :content="item.content"
        :video_list="item.video_list"
        :tag_list="item.tag_list"
        :hot_comment="item.hot_comment"
        :comment_num="item.comment_num"
        :praise_num="item.praise_num"
        />
    </div>
    </div>
  
  </van-tab>
    </van-tabs>
   </div>
  </div>
</template>

<script setup lang="ts">
import kong from '../../../assets/img/no-q.png'
import ArticleItem from '../../find/findItem/recommendItem/ArticleItem.vue'
import VoteItem from '../../find/findItem/recommendItem/VoteItem.vue'
import DetailItem from '../../find/findItem/recommendItem/DetailItem.vue'
import QuestionItem from '../../find/findItem/recommendItem/QuestionItem.vue'
import TestItem from '../../find/findItem/recommendItem/TestItem.vue'
import {recommendM} from '../../../typings'
import { ref } from 'vue'
const list = ref<Array<recommendM>>();
  list.value = JSON.parse(localStorage.getItem('myUpList')) || []; 
let count = JSON.parse(localStorage.getItem('myFollowList')) || []; 
  console.log("关注数量=》",count.length);
  
  
</script>

<style scoped lang="scss">
.personl {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  background-color: #f6f6f6;
  z-index: 99999;
  overflow: scroll;
}
.personl-content {
  position: relative;
}
.header {
  width: 100vw;
  height: 10rem;
  background-color: #596070;
  padding: 1.875rem 1rem 0rem 1rem;
  box-sizing: border-box;
  .header-content {
  display: flex;
  justify-content: space-between;
  .right-icon-item {
   margin-right: 0.625rem;
}
}
}
.personl-detail {
  position: absolute;
  top: 7rem;
  width: 100vw;
  height: 9rem;
  background-color: #fff;
  border-radius: 1rem 1rem 0rem 0rem;
  padding-top: 3rem;
  padding: 2.2rem 1.2rem 0rem 1.2rem;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  .personl-img {
  position: absolute;
  top: -3rem;
  transform: translateY(50%);
  left: 24px;
}
  .meet {
  position: absolute;
  top: -1.5rem;
  left: 5.2rem;
  font-size: .8rem;
  color: hsla(0,0%,100%,.5);
}
.personl-num {
  display: flex;
  align-items: center;
  .personl-id {
    font-weight: bold;
    font-size: 1.2rem;
  }
  .growth-value {
    font-size: 0.6rem;
    font-weight: bold;
    padding: 0.25rem;
    border-radius: 9999rem;
    background: linear-gradient(35deg,#ffc080,#ffddb4);
    color: #a74406;
    margin-left: 5px;
  }
}
.belong-place {
  span {
    font-size: .7rem;
    padding: 0.2rem;
    background-color: #ff8a71;
    color: #fff;
    border-radius: .15rem;

  }
}
.list {
  display: flex;
  i {
    font-style: normal;
    font-size: 1.1rem;
    font-weight: bold;
    margin-right: .25rem;
  }
  span {
    color: rgba(0,0,0,.54);
    font-size: .65rem;
    margin-right: 1.5rem;
  }
}
}
.tab {
  width: 100vw;
  position: absolute;
  top: 16rem;
  left: 0;
}

.kong {
  // position: relative;
  text-align: center;
  background-color: #f5f5f5;
  // height: 26.85rem;
  height: calc(100vh - 20rem);
  .kong-img {
  // position: absolute;
  width: 50vw;
  margin-top: 3rem;
  // margin-left: 50%;

  // left: 50%;
  // top: 50%;
  // height: 45vh;
}
.no-commit {
  font-size: .8rem;
  color: #757575;
}
}
.up-item {
  margin-top: .5rem;
}
</style>